<template>
    <div class="admin-first-category">
        <div class="admin-first-header">横向轮播图片设置 <span style="font-size: 12px; margin-left: 20px;">图片尺寸 750px * 375px</span></div>
        <div class="admin-first-content">
            <span><el-button type="primary" @click="dialogVisibleAdd = true">新增</el-button></span>
            <div>
                <el-table v-loading="loading" :data="lunboData" style="width: 100%">
                    <el-table-column type="index" width="80" />
                    <el-table-column prop="cg" label="类别" width="180" />
                    <el-table-column prop="title" label="类别标题" width="180" />
                    <el-table-column prop="order" label="排序" width="180" />
                    <el-table-column label="图片">
                        <template v-slot:default="scope">
                            <img :src="scope.row.cover + '?x-oss-process=image/resize,h_80/quality,q_50'">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template v-slot:default="scope">
                            <el-button type="danger" :icon="Delete" circle @click="deleteData(scope.row.id)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 新增轮播图 -->
            <el-dialog v-model="dialogVisibleAdd" title="新增二级分类" width="450">
                <el-form :model="lunboDataAdd" label-width="auto" style="max-width: 400px">
                    <div style="margin-top: 20px;">
                        <span style=" margin-right: 10px;">选择类别</span>
                        <el-select v-model="lunboCg" value-key="id" placeholder="Select" style="width: 312px" @change="bindValue">
                            <el-option v-for="item in categoryRuby" :key="item.id" :label="item.title" :value="item" />
                        </el-select>                        
                    </div>
                    <div style="margin-top: 20px;">
                        <span style=" margin-right: 10px">轮播链接</span>
                        <el-select v-model="categorydata" value-key="id" placeholder="Select" style="width: 312px" @change="bindValueCg">
                            <el-option v-for="item in lunboCategoryData" :key="item.id" :label="item.title" :value="item" />
                        </el-select>                        
                    </div>
                    <div style="margin-top: 20px;">
                        <span style="margin-right: 20px; display: inline-block; width: 50px; text-align:initial">排序</span>
                        <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" style="width: 310px;" />
                    </div>
                </el-form>
                <div style="text-align: center; margin-top: 20px;"><el-button type="primary"
                    @click="onSubmitLunbo">新增</el-button></div>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { addLunBo, lunboList, getCategory, delLunBo } from '../../requests/index';

const dialogVisibleAdd = ref(false);
const loading = ref(true);

const lunboData = ref([]);
const categorydata = ref();
const lunboCategoryData = ref([]);
const lunboDataAdd = reactive({
    cg: null,
    cg_id: null,
    order: null
});
const lunboCg = ref();
const categoryRubyCg = ref();
const num = ref(1)
const categoryRuby = reactive([
    {
        id: 1,
        title: "产品"
    },
    {
        id: 2,
        title: "技术服务"
    },
    {
        id: 3,
        title: "公司新闻"
    },
    {
        id: 4,
        title: "促销活动"
    }
]);


const bindValue = async(value)=>{
    lunboDataAdd.cg = value.id;
    // 获取分类下的数据
    const res = await getCategory({"id": value.id});
    if (res.status === 2000){
        categorydata.value = null;
        lunboCategoryData.value = res.data;
    }else(
        ElMessage.error(res.msg)
    );
};

const bindValueCg = (value)=>{
    lunboDataAdd.cg_id = value.id;
};

const getLunBo = async () => {
    const res = await lunboList();
    if (res.status === 2000) {
        lunboData.value = res.data;
    } else {
        ElMessage.error("获取一级分类列表失败")
    }
    loading.value = false;
};
getLunBo();
const handleChange =(value)=>{
    num.value = value;
}

const onSubmitLunbo = async()=>{
    lunboDataAdd.order = num.value;
    console.log(lunboDataAdd);
    const res = await addLunBo(lunboDataAdd);
    if (res.status === 2000){
        ElMessage.success("新增成功");
    }else{
        ElMessage.error("新增失败");
    };
    dialogVisibleAdd.value = false;
    lunboDataAdd.cg = null;
    lunboDataAdd.order = null;
    lunboDataAdd.cg_id = null;
    getLunBo();
}


const deleteData = async(id)=>{
    const res = await delLunBo({"id": id});
    if (res.status === 2000){
        ElMessage.success("删除成功");
    }else{
        ElMessage.error("删除失败");
    };
    getLunBo();
};
</script>

<style scoped>
.admin-first-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
}

.admin-first-content {
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-first-category {
    min-height: 100px;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .avatar {
    height: 200px;
    display: block;
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>